<template>
    <el-container class="auth-page">
        <el-main class="auth-main">
            <el-row justify="center" align="middle" class="auth-container">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" class="form-wrapper">
                    <div class="form-header">
                        <h2>{{ isLogin ? '登录' : '注册' }}</h2>
                    </div>
                    <div>
                        <LoginForm v-if="isLogin" @switch="isLogin = false" />
                        <RegisterForm v-else @switch="isLogin = true" />

                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue';
import LoginForm from '@/layout/LoginForm.vue';
import RegisterForm from '@/layout/RegisterForm.vue';

const isLogin = ref(true); // 控制登录和注册页面切换
</script>

<style scoped lang="scss">
.auth-page {
    height: 100vh;
    background: $background-color;
    margin: 0 auto;
}

.auth-main {
    display: flex;
    justify-content:center;
    align-items: center;
}
.auth-container {
    height: 100%;
}

.form-wrapper {
    padding: 20px;
    background: gradient(#dac8c2de, #ffffff); 
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-header {
    text-align: center;
    margin-bottom: 20px;
}
</style>
